<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS变量</title>
    <style>
        /* 
            Css变量
            * 定义：--name
            * 使用：var()
        */
        :root{
            --button-color:#0f0;
        }

        body{
            --color:#58bc58;
        }

        .btn{
            color:var(--color)
        }
        .title{
            --button-color:#f90;
            color:#f00
        }

        button{
            color:var(--button-color)
        }
    </style>
</head>
<body>
    <h1>CSS变量</h1>
    <div class="btn">btn</div>
    <div class="title">
        title
        <button>title中的button</button>
    </div>
    <button>外面的button</button>
</body>
</html>